// ==UserScript==
// @name         Add Button and Custom Div
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在页面顶部添加一个按钮，点击后显示一个自定义的 div。
// @author       You
// @match        https://weixin.qq.com*
// @match        http://lgu.usim.vc/index/index.html*
// @match        http://localhost/1.html
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // 创建按钮
    var button = document.createElement('button');
    button.textContent = '打开弹框';
    button.style.position = 'fixed';
    button.style.top = '10px';
    button.style.left = '10px';
    button.style.zIndex = '999999999';
    button.style.padding = '10px';
    button.style.fontSize = '14px';
    button.style.backgroundColor = '#007BFF';
    button.style.color = 'white';
    button.style.border = 'none';
    button.style.borderRadius = '5px';
    button.style.cursor = 'pointer';

    // 创建自定义 div
    var customDiv = document.createElement('div');
    customDiv.style.display = 'none';  // 初始时隐藏
    customDiv.style.position = 'fixed';
    customDiv.style.top = '50px';
    customDiv.style.left = '10px';
    customDiv.style.width = '450px';
    customDiv.style.padding = '20px';
    customDiv.style.backgroundColor = 'white';  // 设置为白色
    customDiv.style.color = 'black';
    customDiv.style.borderRadius = '8px';
    customDiv.style.boxShadow = '0px 4px 8px rgba(0, 0, 0, 0.2)';
    customDiv.style.zIndex = '999999999999';
    customDiv.style.fontFamily= 'SimSun, 宋体, serif';  // 设置字体为宋体
    customDiv.style.fontSize= '13px';  // 设置字体大小为 11px

    // 创建内容行
    var rows = [
        { label: '商品名상품명:', className: 'aaa',leftContent:'LG U+ Unlimited Data SIM card ',rightContent:' days',number:2 },
        { label: '订单号码예약번호:', className: 'bbb' ,leftContent:'',rightContent:'',number:3},
        { label: '预约者名字예약자이름:', className: 'ccc',leftContent:'',rightContent:'',number:5 },
        { label: '护照号码여권번호:', className: 'ddd' ,leftContent:'',rightContent:'',number:6},
        { label: '数量수량:', text: '1' ,className:'eee',leftContent:'',rightContent:'',number:4},
        { label: '机场공항:', text: 'ICN_T1',className:'fff',leftContent:'',rightContent:'',number:7 },
        { label: '', text: '상호명:유심box' ,className:'ggg',last:1,leftContent:'',rightContent:''}
    ];

    rows.forEach(function(row, index) {
        var rowDiv = document.createElement('div');
        rowDiv.style.display = 'flex';
        rowDiv.style.justifyContent = 'space-between';
        rowDiv.style.marginBottom = '10px';

        // 左侧内容（加粗）
        var leftText = document.createElement('div');
        leftText.textContent = row.label;
        leftText.style.fontWeight = 'bold';
        leftText.style.width='40%';
        leftText.style.textAlign='center';
        rowDiv.appendChild(leftText);

        // 右侧内容
        var rightText = document.createElement('div');
        rightText.style.width='60%';
        rightText.classList.add("self-"+row.className)
        if (index!=6) {
            /* var element = document.querySelector(`.${row.className}`);
                const middleText = element ? element.textContent : '';
                rightText.textContent = row.leftContent+middleText+row.rightContent;*/
        } else {
            rightText.textContent = row.text;
            rightText.style.textAlign='right';
            rightText.style.fontWeight = 'bold';
        }
        rowDiv.appendChild(rightText);

        // 将每行内容添加到自定义 div 中
        customDiv.appendChild(rowDiv);
    });

    // 将按钮和自定义 div 添加到页面
    document.body.appendChild(button);
    document.body.appendChild(customDiv);

    // 点击按钮时，切换显示/隐藏自定义 div
    /* button.addEventListener('click', function() {
            if (customDiv.style.display === 'none') {
                customDiv.style.display = 'block';
                button.textContent="关闭弹框"
            } else {
                customDiv.style.display = 'none';
                button.textContent="打开弹框"
            }
        });*/

    $(button).on('click', function() {
        // 获取每个 class 的值，并更新到 customDiv 中
        rows.forEach(function(row, index) {
            console.log("index:"+index,"number:"+row.number,"label:"+row.label)
            if (index!=6) {
                console.log($('#setInfo > div:nth-child('+row.number+') > div > input'))
                var elementText = $('#setInfo > div:nth-child('+row.number+') > div > input').val();  // 获取页面中对应 class 的值
                let middleText = elementText ? elementText : '';
                console.log(middleText);
                if(index == 0){
                    var regex = /Data (\d+) days/; // 匹配"Data"和"days"之间的数字
                    var match = middleText.match(regex);
                    if (match) {
                        middleText = match[1]; // 提取到的数字
                        console.log(middleText); // 输出：5
                    } else {
                        console.log("No match found");
                    }
                }
                const textContent = row.leftContent+middleText+row.rightContent;
                $(customDiv).find('.self-' + row.className).text(textContent);
            }
        })

        $(customDiv).toggle();  // 显示或隐藏自定义 div
    });
})();
